<template>
  <div class="home">
    <section class="hero is-medium is-dark mb-6">
      <div class="hero-body has-text-centered">
        <p class="title mb-6">
          Welcome to jacket
        </p>
        <p class="subtitle">
          The best jacket store online
        </p>
      </div>
    </section>

    <div class="columns is-multiline">
      <div class="column is-12">
        <h2 class="is-size-2 has-text-centered"> Latest products</h2>
      </div>

<!--      <div class="column is-3" v-for="product in latestProducts"-->
<!--           v-bind:key="product.id">-->

<!--        <div class="box">-->
<!--          <figure class="image mb-4">-->
<!--            <img v-bind:src="product.get_thumbnail">-->
<!--          </figure>-->

<!--          <h3 class="is-size-6">{{product.name}}</h3>-->
<!--          <p class="is-size-6 has-text-grey">${{product.price}}</p>-->

<!--          <router-link v-bind:to="product.get_absolute_url" class="button is-dark mt-4"> View details</router-link>-->
<!--        </div>-->
<!--      </div>-->
<!--      调用自定义组件-->
      <ProductBox
        v-for="product in latestProducts"
        v-bind:key="product.id"
        v-bind:product="product"/>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

//导入自己封装的组件
import ProductBox from "@/components/ProductBox";

export default {
  name: 'HomeView',
  data(){
    return{
      latestProducts:[]
    }
  },
  components: {
    //调用自定义组件
    ProductBox
  },
  mounted() {
    this.getLatestProducts()

    //网页修改标题
    document.title = 'Home | JACKETS-SHOP'
  },
  methods:{
    async getLatestProducts(){
      //添加加载框
      this.$store.commit('setIsLoading',true)

      await axios
        .get(`/api/v1/latest-products/`)
      .then(response=>{
        this.latestProducts=response.data
      })
      .catch(error=>{
        console.log(error)
      })

      //移除加载框
      this.$store.commit('setIsLoading',false)
    }
  }
}
</script>

